<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Slime</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no" />
    <link rel="stylesheet" type="text/css" href="index.css">
</head>
<body>


<div class="html-test" id="htmlTest">
    <!-- 图片 -->
    <div class="show-img">
        <img id="initImg" src="images/img01.jpg" alt="">
    </div>
    <!-- 测试展示 -->
    <div class="show-question" id="showQuestion">Questions？</div>
    <div class="show-option">
        <ul id="showOption">
            <li>A.OptionA</li>
            <li>B.OptionB</li>
        </ul>
    </div>
</div>


<!-- 结果展示 -->
<div class="html-result" id="htmlResult">
    <!-- 视频 -->
    <div class="show-video">
        <video id="videoSrc" height="340" loop="loop" autoplay="autoplay" muted type="video/mp4">
            <source src="videos/video1.mp4">
        </video>
    </div>
    <div class="result-title">RESULT</div>
    <div class="show-result" id="showResult">Psychological Type : Extraversion</div>
<!--    <div class="result-head"><img id="showResultHead" src="images/card01.jpg" alt=""></div>-->
    <div class="show-result" id="showResultHero">Phoebus is your Animus</div>
    <div class="result-google"><img src="images/logo.png" alt="logo"></div>
</div>


<!-- 下载按钮 -->
<button class="upload" id="uploadBtn">
    <span class="txt-download">DOWNLOAD</span>
    <span>a psychology leisure game</span>
</button>


<script type="text/javascript" src="questionBank.js"></script>
<script>
    const bank01 = questionBank01;
    const bank02 = questionBank02;
    const result = resultList;
</script>
<script type="text/javascript" src="index.js"></script>
</body>
</html>